@charset "utf-8";
@function r($px) {
    @return $px/100*1rem;
}

* {
    padding: 0;
    margin: 0;
    font-family: "微软雅黑";
}

html,
body {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    height: 100%;
    background: url(../img/game_over/bg.png) no-repeat left top/cover;
    overflow: hidden;
    position: relative;
    .slogon {
        width: r(320);
        height: r(163);
        background: url(../img/game_over/slogon.png) no-repeat left top/cover;
        margin: r(172) auto 0;
    }
    .evaluate {
        margin: r(55) auto 0;
        font-size: 0;
        text-align: center;
        li {
            width: r(82);
            height: r(78);
            margin-right: r(34);
            display: inline-block;
            img {
                width: 100%;
            }
            &:last-child {
                margin: 0;
            }
        }
    }
    .level {
        font-size: r(30);
        font-weight: bold;
        letter-spacing: r(4);
        text-align: center;
        color: white;
        margin: r(30) auto 0;
        span {
            padding: 0 r(10);
            color: #fbea27;
        }
    }
    .time {
        font-size: r(30);
        font-weight: bold;
        letter-spacing: r(4);
        text-align: center;
        color: white;
        margin: r(20) auto 0;
        span {
            padding: 0 r(10);
            color: #fbea27;
        }
    }
    .btn {
        width: r(433);
        height: r(114);
        background: url(../img/game_over/btn_bg.png) no-repeat left top/cover;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: r(52);
        text-align: center;
        line-height: r(76);
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 5px black;
    }
    .again {
        bottom: r(380);
    }
    .back {
        bottom: r(235);
    }
    .tips {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(76,76,76,.8);
        display: none;
        .buttons {
            width: r(440);
            height: r(279);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url(../img/game_over/tips_bg.png) no-repeat left top/cover;
            text-align: center;
            p {
                font-size: r(30);
                font-weight: bold;
                color: white;
                letter-spacing: r(4);
                margin-top: r(82);
            }
            .yes_no {
                width: r(163);
                height: r(75);
                display: inline-block;
                font-size: 0;
                img{
                    width: 100%;
                }
            }
        }
    }
}